<template>
    <div style="padding: 10px 20px" v-loading="loading">
        <div class="toolbar">
            <el-button text type="primary" @click="onOpenAdd">
                <el-icon>
                    <ele-Plus />
                </el-icon>
                新增字典项
            </el-button>
        </div>
        <el-table :data="dictList" border>
            <el-table-column prop="name" label="字典项名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="value" label="字典项值" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
            <el-table-column label="状态" show-overflow-tooltip>
                <template #default="scope">
                    <el-tag v-if="scope.row.status == StatusEnum.ENABLE.value" type="success">
                        {{ StatusEnum.ENABLE.label }}
                    </el-tag>
                    <el-tag v-if="scope.row.status == StatusEnum.DISABLE.value" type="warning">
                        {{ StatusEnum.DISABLE.label }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip width="240">
                <template #default="scope">
                    <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)">
                        <el-icon>
                            <ele-Edit />
                        </el-icon>
                        修改
                    </el-button>
                    <el-button size="small" text type="danger" @click="onTabelRowDel(scope.row)">
                        <el-icon>
                            <ele-Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <DictForm ref="dicFormRef" @refresh="getTableData" :typeCode="code" />
    </div>
</template>
<script lang="ts" setup>
import { ref, defineAsyncComponent, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { StatusEnum } from '@/enums/StatusEnum.ts'
import { Dict } from '@/api/system/dict/types.ts'
import { getDictList, getDictDetail, deleteDict } from '@/api/system/dict/index.ts'

const DictForm = defineAsyncComponent(() => import('./DictForm.vue'))

interface Props {
    code: string
}
const props = defineProps<Props>()

const dicFormRef = ref()
const onOpenEdit = async (row: Dict.Row) => {
    const item = await getDictDetail(row.id)
    dicFormRef.value.openDialog(item)
}
const onOpenAdd = () => {
    dicFormRef.value.openDialog()
}

/**
 *  删除字典
 * @param row
 */
const onTabelRowDel = (row: Dict.Row) => {
    ElMessageBox.confirm(`此操作将永久删除字典：${row.name}, 是否继续?`, '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            deleteDict(row.id + '').then(() => {
                ElMessage.success('删除成功')
                getTableData()
            })
        })
        .catch(() => {})
}

//加载字典
const loading = ref(false)
const dictList = ref<Dict.Row[]>([])
const getTableData = async () => {
    loading.value = true
    const result = await getDictList(props.code)
    dictList.value = result || []
    loading.value = false
}

onMounted(() => {
    getTableData()
})
defineExpose({
    loadDict: getTableData,
})
</script>
